<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>地平线8号官方商城</title>
    <link rel="stylesheet" type="text/css" href="css/center.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="300px" style="text-align: right">
                <el-menu
                        active-text-color="#FFD637"
                        style="overflow: hidden;border: none"
                        class="el-menu-vertical-demo"
                        @select="handleselect">
                    <el-menu-item index="0" disabled class="my">
                        <span slot="title">我的</span>
                    </el-menu-item>
                    <el-menu-item index="1">
                        <span slot="title">我的订单</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <span slot="title">个人资料</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <span slot="title">收货地址</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <span slot="title">我的优惠券</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <span slot="title">会员中心</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!--我的订单-->
                <el-container v-if="selectedIndex=='1'">
                    <el-header>
                        <div>
                            <el-menu active-text-color="#FFD637" :default-active="activeIndex" class="el-menu-demo"
                                     mode="horizontal"
                                     @select="handleSelect1" style="text-align: right;border: none">
                                <el-menu-item index="1">所有订单</el-menu-item>
                                <el-menu-item index="2">待付款</el-menu-item>
                                <el-menu-item index="3">代发货</el-menu-item>
                                <el-menu-item index="4">待收货</el-menu-item>
                                <el-menu-item index="5">待评论</el-menu-item>
                            </el-menu>
                        </div>
                    </el-header>
                    <el-main>
                        <div class="orderTitle">
                            <div class="left wb90">
                                <div class="wb35 left tac">宝贝</div>
                                <div class="wb10 left tac">单价</div>
                                <div class="wb10 left tac">数量</div>
                                <div class="wb10 left tac">商品操作</div>
                                <div class="wb10 left tac">实付款</div>
                                <div class="wb25 left tac">交易状态</div>
                            </div>
                            <div class="wb10 left tac">交易操作</div>
                        </div>
                        <div class="cars" style="margin-top: 30px">
                            <div class="orderNo">
                                <p>2022-07-16 16:45:21</p>
                                <p>订单号:1515616551</p>
                            </div>
                            <div class="ordermodal">
                                <div class="treasure">
                                    <div class="carimg">
                                        <img src="./images/goods1-1.jpg" style="width: 100px">
                                    </div>
                                    <div class="textTitle">
                                        <div class="title">地平线8号机能邮差包</div>
                                        <div class="textcolor">颜色:黑色</div>
                                    </div>
                                </div>
                                <div class="price">
                                    ￥629
                                </div>
                                <div class="number">
                                    1
                                </div>
                                <div class="afterSale">
                                    申请售后
                                </div>
                                <div class="payment">
                                    <div class="money">￥629</div>
                                    <div class="freight">(含运费0)</div>
                                </div>
                                <div class="state">
                                    待付款
                                </div>
                                <div class="operate">
                                    <el-button type="primary" class="button">主要按钮</el-button>
                                    <el-button type="primary" class="button">主要按钮</el-button>
<!--                                    <button @click="primary(1)" class="button">付款</button>-->
<!--                                    <button @click="primary(0)" class="button">取消订单</button>-->
                                </div>
                            </div>
                        </div>
                    </el-main>
                </el-container>

                <!--个人资料-->
                <el-container v-if="selectedIndex=='2'">
                    <el-form :model="ruleData" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="姓名:" prop="name">
                            <el-input v-model.number="ruleData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="生日:" prop="birthday">
                            <el-input v-model="ruleData.birthday"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model="ruleData.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="详细地址:" prop="address">
                            <el-input v-model="ruleData.address"></el-input>
                        </el-form-item>
                    </el-form>
                </el-container>

                <!--收货地址-->
                <el-container v-if="selectedIndex=='3'">
                    <el-header>
                        <div class="address">收货地址</div>
                    </el-header>
                    <el-main>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                 class="demo-ruleForm">
                            <el-form-item label="详细地址" prop="detailedAddress">
                                <el-input v-model="ruleForm.detailedAddress"></el-input>
                            </el-form-item>
                            <el-form-item label="邮政编码" prop="postalCode">
                                <el-input v-model="ruleForm.postalCode"></el-input>
                            </el-form-item>
                            <el-form-item label="收货人姓名" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="ruleForm.phone" placeholder="手机号"></el-input>
                            </el-form-item>
                            <el-form-item text-color="#FFD637" fill="#FFD637">
                                <el-checkbox v-model="ruleForm.default" text-color="#FFD637">设置为默认收货地址</el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit"
                                           style="background-color:#FFD637;border: none">立即创建
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>

                <!--我的优惠券-->
                <el-container v-if="selectedIndex=='4'">
                    <el-header>
                        <div>
                            <el-menu active-text-color="#FFD637" :default-active="activeIndex" class="el-menu-demo"
                                     mode="horizontal"
                                     @select="handleSelect4" style="text-align: right;border: none">
                                <el-menu-item index="1">全部</el-menu-item>
                                <el-menu-item index="2">可用卷</el-menu-item>
                                <el-menu-item index="3">无效卷</el-menu-item>
                            </el-menu>
                        </div>
                    </el-header>
                    <el-main>

                    </el-main>
                </el-container>

                <!--会员中心-->
                <el-container v-if="selectedIndex=='5' " active-text-color="#FFD637"
                              style="display: block;border: none">
                    <div class="viptitle">更多会员专属福利请前往“地平线8号会员中心”</div>
                    <div class="vipimg"><img src="./images/code.png" alt="" style="width: 250px;"></div>
                    <div class="viptext">扫码直达</div>
                </el-container>
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>

    let v = new Vue({
        el: "body>div",

        data: function () {
            return {
                selectedIndex: "1",
                tabPosition: 'left',
                activeIndex: '1',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                ruleForm: {
                    detailedAddress: "",
                    postalCode: "",
                    name: "",
                    phone: "",
                    default: false
                },
                ruleData:{
                    name:"",
                    phone:"",
                    address:""
                },
                rules: {
                    detailedAddress: [
                        {required: true, message: '请输入详细地址信息,如道路、门牌号、小区、楼栋号、单元等信息', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '收货人姓名', trigger: 'blur'},
                        {min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            handleselect(index) {
                v.selectedIndex = index;
            },
            handleSelect1(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect4(key, keyPath) {
                console.log(key, keyPath);
            },
            onSubmit() {
                console.log('submit!');
            },
            primary(id){

            }
        }
    })
</script>
</html>